<template>
    <div>
        <div class="pager">
            <div class="block">
                <el-pagination @current-change="changindex" @size-change="handleSizeChange" :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="user.length"
                    :currentPage="currentPage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['user'],
    data() {
        return {
            pageSize: 5,
            // 当前页码
            currentPage: 1,
        }
    },
    //计算属性
    computed: {

    },
    //监听
    watch: {
        // 监听列表是否发生变化
        user: {
            handler() {
                // 判断搜索框的值把当前页变为1
                this.currentPage = 1
                this.$emit('showList', this.RenderData(this.user))
            },
            immediate: true
        },
        currentPage: {
            handler() {
                this.$emit('showList', this.RenderData(this.user))
            },
            immediate: true
        }
    },
    //方法
    methods: {
        handleSizeChange(val) {
            if (!val) return
            this.pageSize = val
            this.$emit('showList', this.RenderData(this.user))

        },
        //渲染当前页面的数据
        RenderData(value) {
            let CurrentData = [];
            CurrentData = value.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            return CurrentData
        },
        // 换页
        changindex(index) {
            this.currentPage = index
        }
    },
    //组件
    components: {

    },
    // 生命周期
    mounted() {
        this.handleSizeChange()
    },
    created() {
    },
}
</script>

<style lang="less" scoped>
.el-pagination {
    margin: 5px auto;
    text-align: right;
    background-color: #FFFFFF;
    height: 15vh;
    outline: 1px solid #EBEEF5;
}
</style>